<template>
    <div class="loading">
        <svg class="loading__outer">
            <circle
                class="loading__inner"
                cx="25"
                cy="25"
                r="20"
                fill="none"
                :stroke="stroke"
                stroke-width="3"
                stroke-linecap="round"
            />
        </svg>
    </div>
</template>

<script>
export default {
    name: 'CommonLoading',

    props: {
        stroke: {
            type: String,
            default: '#047AFF'
        }
    }
};
</script>

<style scoped lang="scss">
@import '~@isyscore/styles/variables';

.loading {
    width: 50px;
    height: 50px;
    margin: 100px auto;
    position: relative;

    &__outer {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        animation: kf-outer 2s linear infinite;
    }

    &__inner {
        animation: kf-inner 1.5s ease-in-out infinite;
    }
}

@keyframes kf-outer {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes kf-inner {
    0% {
        stroke-dasharray: 1, 125;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 125;
        stroke-dashoffset: -25px;
    }
    100% {
        stroke-dasharray: 100, 125;
        stroke-dashoffset: -125px;
    }
}
</style>
